<template>
	<view class="content" style="background: #faf9f9;min-height: 100vh;max-height: 100%">
		<!-- <view class="classiftTOP">
			<view class="classiftTOPl">
				<view class="classiftTOPln classiftBut">书架</view>
				<view class="classiftTOPlv">浏览历史</view>
			</view>
		</view> -->

    <view style="">
      <img style="width: 100%" src="https://hyxs.ychlkj.cn/uploads/20240110/d8f6155fd26e89ef49aee8a01f6366c8.png">
    </view>

    <view style="width: 100%;padding-left: 20px;top: 20px;position: absolute">
      <view class="top-search" @click="toSearch()">
        <img alt="" style="width: 20px;height: 20px;margin-right: 10px" src="https://hyxs.ychlkj.cn/uploads/20240110/5c6ee4ed371fc70d76f80dd99f50eab7.png">
        <test class="text">搜索您的书籍</test>
      </view>
    </view>

		<view class="" style= "position: absolute;top: 70px;width: 50%; display: flex; justify-content: space-between; align-items: center;margin-left: 8px">
		  <text style="color: #333;font-size: 40rpx; font-weight: 600; padding: 10px 20rpx 0 20rpx" @click="tabClick(0)">小说</text>
		  <text style="color: #777777;font-size: 16px; font-weight: 600; padding: 10px 20rpx 0 20rpx" @click="tabClick(1)">听书</text>
		  <text style="color: #777777;font-size: 16px; font-weight: 600; padding: 10px 20rpx 0 20rpx" @click="tabClick(2)">漫画</text>
<!--		<image @click="tosousuo" style=" width: 50rpx; height: 50rpx;" src="../../static/sou.png"></image>-->
		</view>

    <view v-if="tabIndex===0" style="position: absolute;top: 120px;width: 100%">
<!--		  <scroll-view scroll-y="true" :show-scrollbar="false">-->
			<view class="Book">
				<view v-for="(book , index) in bookList" :key="index" class="Bookf" @longpress="handleLongPress(book)"
					@click="booksPage(book)">
					<view class="Bookfi" style="position: relative;">
						<img :src="`${yourBaseURL}${book.mian_image}`"></img>
<!--						<view class="" style="position: absolute;left: 5rpx;border-radius: 10rpx; top: 5rpx; font-size: 20rpx; text-align: center; width: 70rpx;height: 30rpx; background: #feb611; ">-->
<!--							<text v-if="book.news==0"> 连载中</text>-->
<!--								<text v-else> 已完结</text>-->
<!--						</view>-->
						<!-- <img :src="book.imgUrl" alt=""> -->
					</view>
					<view class=" Bookfname1">
						{{ book.title }}
					</view>
					<view class="Bookfname">
						{{ book.jie_id }}章/共{{book.count}}章
					</view>
          <view style="color: #999999;
				font-size: 12px;padding: 8px">
            {{book.jie}}
          </view>
				</view>
			</view>
<!--		</scroll-view>-->
		  <!-- 长按弹出框 -->
		  <view class="" style="position: fixed;bottom: 0; z-index: 9999;">
			<uni-popup ref="popup" type="bottom">
				<view class="" style="width: 100%; ;background: #fff; border-radius: 20rpx 20rpx 0 0 ;">
					<view class="" style="padding: 40rpx  0; display: flex; ">
						<view class="" style="padding-left: 40rpx;">
							<img style="width: 150rpx; height: 250rpx;"
								:src="`${yourBaseURL}${listName.mian_image}`"></img>

						</view>
						<view class="">
							<view class="" style="font-size: 20rpx; margin-left: 20rpx;">
								<p style="font-size: 35rpx; font-weight: 600;">{{listName.title}}</p>
								<view style="padding: 10rpx 0;">
									<span>主角：</span>
									<span>{{listName.author}}</span>
								</view>
								<view style="height: 120rpx; overflow: hidden; padding-right: 20rpx; ">
									<span
										style="font-size: 30rpx; line-height: 40rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">
										简介:{{listName.jie}}
									</span>
								</view>

							</view>

						</view>

					</view>


					<view class="" style="display:flex; align-items: center;">
						<p @click="toDelete(listName.id)"
							style="width: 50%; background: #ebebeb; padding: 20rpx;text-align: center; color:#6c6c6c;">
							从书架移出</p>
						<p @click="toDetails()"
							style="width: 50%;background: #0570fa;color: #fff;padding: 20rpx;text-align: center;">查看详情
						</p>
					</view>
				</view>
			</uni-popup>
		</view>
		  <!-- 移除书架 弹出框-->
		  <view  class="" style="z-index: 99999; position: fixed;bottom: 0;">
			<uni-popup  ref="popupA">
				<view class="" style="width: 500rpx; height: 300rpx;background: #fff;border-radius: 20rpx;">
					<h3 style="padding: 20rpx;">温馨提示</h3>
					<p  style="padding: 20rpx;">您确定要删除{{listName.title}}？</p>
					<view class="" style="display: flex; color: #0570fa; justify-content: flex-end; padding:  20rpx;">
						<p @click="toOk"  style="padding: 0 20rpx;">确定</p>
						<p @click="toNo" >取消</p>
					</view>
				</view>
			</uni-popup>
		</view>
    </view>

    <view v-if="tabIndex===1">
<!--听书-->
<!--顶部分类-->
<view style="display: flex;margin: 20px 0 10px 0">
  <view style="width: 20%;background: #d2cdf5;margin:0 5px;border-radius: 4px;display: flex;align-items: center;justify-content: center">亲子</view>
  <view class="tag-container" style="width: 75%">
    <view class="tag" style="background: #dddddd">成长</view>
    <view class="tag" style="background: #ffe7ed">情感</view>
    <view class="tag" style="background: #c5e6fb">历史</view>
    <view class="tag" style="background: #dddddd">戏曲</view>
    <view class="tag" style="background: #f9e4cd">名著</view>
    <view class="tag" style="background: #fce2c9">人文</view>
  </view>
</view>

      <view style="background: #fff;border-radius: 5px;margin: 15px;border-radius: 8px">

        <view style="display: flex;justify-content: space-between;align-items: center;padding: 8px 0">
          <view style="display: flex;justify-content: space-around">
            <view style="padding: 10px 20px">推荐榜</view>
            <view style="padding: 10px 20px">完本榜</view>
            <view style="padding: 10px 20px">热播榜</view>
          </view>
          <view style="margin-right: 6px">完整榜单></view>
        </view>

        <view style="display: flex;justify-content: space-around;margin:0 4px 10px 4px">
          <view style="padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">全部</view>
          <view style="padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">小说</view>
          <view style="padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">相声</view>
          <view style="padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">人文</view>
          <view style="padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">历史</view>
        </view>

        <view>

          <view style="display: flex;padding: 12px" @click="toListening()">
            <view>
              <img style="width: 70px" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            </view>
            <view style="width: 24px;text-align: center;color: #deba86;font-weight: 600">1</view>
            <view style="display: flex;flex-direction: column;justify-content: space-between;">
              <view style="font-weight: 600">我的缅北往事</view>
              <view style="padding-bottom: 8px">  <view style="font-size: 14px;">9.6分</view>
                <view style="font-size: 14px">玄幻</view></view>

            </view>
          </view>

          <view style="display: flex;padding: 12px">
            <view>
              <img style="width: 70px" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            </view>
            <view style="width: 24px;text-align: center;color: #deba86;font-weight: 600">1</view>
            <view style="display: flex;flex-direction: column;justify-content: space-between;">
              <view style="font-weight: 600">我的缅北往事</view>
              <view style="padding-bottom: 8px">  <view style="font-size: 14px;">9.6分</view>
                <view style="font-size: 14px">玄幻</view></view>

            </view>
          </view>

        </view>

      </view>



    </view>
    <view v-if="tabIndex===2">
      <view style="background:#fde8d3 ;padding: 10px;margin: 15px;border-radius: 8px">
        <view style="display: flex;justify-content: space-between;align-items: center;padding: 10px 6px">
          <view style="color: #4f3516;font-weight: 600;font-size: 20px">推荐榜</view>
          <view style="font-weight: 600;color: #6f5338;font-size: 17px">更多></view>
        </view>
        <view style="display: flex;justify-content: space-around;text-align: center">

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题1</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题2</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题3</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

        </view>
      </view>


      <view style="background:#fff ;padding:0 10px 10px 10px;margin: 15px auto;border-radius: 8px;width: 95%">
        <view style="display: flex;justify-content: space-between;align-items: center;padding: 15px 6px">
          <view style="color: #000001;font-weight: 600;font-size: 20px">热门推荐</view>
          <view style="color: #000000;font-size: 16px;font-weight: 600">更多></view>
        </view>
        <view style="justify-content: flex-start;margin:0 4px 10px 4px; overflow: auto; white-space: nowrap;width: 100%">
          <view style="display: flex;">
          <view class="comic-active" style="margin-right: 6px;padding: 8px 15px;background: #f7f7f7;border-radius: 8px;color: #a0a0a0">都市</view>
          <view style="margin-right: 6px;padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">玄幻</view>
          <view style="margin-right: 6px;padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">现代言情</view>
          <view style="margin-right: 6px;padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">穿越</view>
<!--          <view style="margin-right: 6px;padding: 8px 15px;background: #f7f7f7;border-radius: 4px;color: #a0a0a0">古代言情</view>-->
        </view>
        </view>
        <view style="display: flex;justify-content: space-around;text-align: center">

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题1</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题2</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

          <view style="width: 30%">
            <img style="width: 90%" alt="" src="http://hyxs.ychlkj.cn/uploads/20231109/e5a4067755c44499746eee381c162058.jpg">
            <view class="container-text" style="color: #4f3516;font-weight: 600;font-size: 17px">漫画标题3</view>
            <view style="color: #c79f78;font-size: 15px;padding-top: 4px">81万热度</view>
          </view>

        </view>
      </view>

    </view>


    </view>
</template>

<script>
	import {
		getMyCateList,
		getMyAdelShelf,
		getMyBookInfo,
		postUuidregister
	} from '@/http/api.js'
	import books from '@/assets/json/book/books.json'

	export default {
		data() {
			return {
				yourBaseURL: 'http://hyxs.ychlkj.cn',
				bookList: [],
				// userInfo: {},
				listName: {},
				dataE:{},
				userInfo : uni.getStorageSync('userInfo'),
        tabIndex: 0
			}
		},

		onLoad() {

			// 从本地存储中获取数据

			// if(!this.userInfo){
				const systemInfo = uni.getSystemInfoSync();
				 let  data ={
					"uuid":systemInfo.deviceId
				 }
				 // postUuidregister(data).then((res)=>{
					//  uni.setStorageSync('userInfo', res[1].data.data);
         //
					// this.userInfo = uni.getStorageSync('userInfo');
				 // })

				// console.log(systemInfo.deviceId,"9999999999999999999999999999999");
			// }
				// this.MyCateList()
		},
		onShow() {
				this.MyCateList()
		},
		onPullDownRefresh() {
				this.MyCateList()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		methods: {

      toSearch(){

        uni.navigateTo({
          url: '/pages/search/search_news/search_news'
        })

      },

      toListening(){

        uni.navigateTo({
          url: '/pages/listening/index?id=1'
        });

      },

      //点击tab
      tabClick(index){
        this.tabIndex = index
      },


			// 搜索
			tosousuo() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			},
			// 查看详情
			toDetails(){
				console.log("查看详情",this.dataE);
			uni.navigateTo({
				url: '../books/details/details?id='+this.dataE.book_id
				// url: '../books/books1/books1?id=' + e
			});

			},
			// 书架移出
			toDelete(e) {
				this.dataid = e
				console.log(e, "移除");
				this.$refs.popupA.open('center')
				this.$refs.popup.close()

			},

			// 确定删除
			toOk(){

				let data = {
					"id":this.dataid,
					 "token":uni.getStorageSync('Token')
				}
				getMyAdelShelf(data).then((res) => {
					console.log(res, "移除书架");
					this.MyCateList()
				})

					this.$refs.popupA.close()

			},
			// 取消删除
			toNo(){
				this.$refs.popupA.close()
			},
			// 小说接口
			MyCateList() {
				console.log(uni.getStorageSync('Token'), "123131");
				let data = {
					"token": uni.getStorageSync('Token')
				}
				getMyCateList(data).then((res) => {
					console.log(res, "555555555555555555555555555555555555555");

					this.bookList = res.data.bookList
					console.log(res, "我的书架");
					uni.startPullDownRefresh();
				})
			},

			booksPage(e) {
				console.log(e)
				uni.navigateTo({
					url: '../books/details/details?id='+ e.book_id
				});
			},
			// 长按事件
			handleLongPress(e) {

				this.dataE=e
				this.$refs.popup.open('bottom')
				console.log(e, '长按事件触发');
				// 执行长按事件的逻辑操作
				let data = {
					"token": this.userInfo.userinfo.token,
					"id": e.book_id
				}
				getMyBookInfo(data).then((res) => {
					this.listName = res[1].data.data
					console.log(res[1], "图书详情接口");
				})
			}
			//

		}
	}
</script>

<style lang="less">
	.content {
		position: relative;
		background-color: #fafafa;
	}

	.classiftTOP {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		width: 100vw;
		height: 10vh;
		box-sizing: border-box;
		background-color: #fafafa;
		padding-bottom: 5vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;

		.classiftTOPl {
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			width: 40vw;
			font-size: 14px;
			color: #999999;

			.classiftTOPln {
				margin-left: 5vw;
			}

			.classiftBut {
				font-size: 22px;
				color: #000000;
				font-weight: bold;
			}
		}
	}

	.Book {
		//background: #fff;
		//margin-top: 2vh;
		  // height: 85vh;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		// justify-content:space-evenly;
		justify-content: flex-start;
		align-items: flex-start;
		padding-left: 5vw;
		padding-right: 5vw;

		.Bookf {
      padding-bottom: 6px;
			// flex: 1;
      width: 46%;
      margin-top: 70px;
      margin-left: 2%;
      margin-right: 2%;
      //text-align: center;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(0,0,0,0.05);
      background: #fff;
			.Bookfi {
				width: 25vw;
				//height: 36vw;

				img {
          margin-top: -60px;
					width: 96px;
					height: 140px;
          margin-left: 10px;
				}
			}

			.Bookfn {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				margin-top: 3vw;
				height: 9vw;
			}

			.Bookfname {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #999999;
				font-size: 12px;
        padding-left: 10px;
			}
			.Bookfname1 {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #000;
				font-size: 15px;
				margin: 5px 0;
        padding-left: 10px;
			}
		}

	}

  .container-text {
    //width: 100px; /* 设置容器宽度 */
    overflow: hidden; /* 隐藏溢出的文本 */
    text-overflow: ellipsis; /* 将溢出的文本显示为省略号 */
    white-space: nowrap; /* 防止换行 */
  }



  .tag-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .tag {
    text-align: center;
    padding:15px 5px;
    //border: 1px solid #ccc;
    border-radius: 4px;
  }


  .comic-active {
    background: linear-gradient(to right, #f18c5f, #fa6f38) !important;
    color: #fff !important;
  }
  .top-search{
    padding: 8px;
    display: flex;
    justify-content: left;
    align-items: center;
    background: rgba(255,255,255,0.7);
    box-shadow: 0px 4px 12px 4px rgba(32,32,32,0.02);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    width: 80%;
    border: 1px solid rgba(0,0,0,0.04);
  }
  .top-search .text{
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 14px;
  }
</style>
